<script setup lang="ts">
import {markRaw, onMounted, ref} from "vue";
import type {EChartsOption, EChartsType} from "echarts";
import * as echarts from "echarts";
import {useGetFunnelDataApi} from "@/api";
import type {Common, Funnel} from "@/interface";
import 'echarts-wordcloud'

const funnel = ref()
const option = ref<EChartsOption>()
const myChart = ref<EChartsType>()
const funnelData = ref<Funnel>({
  data:[]
})
const init = async () => {
  const {data:res} = await useGetFunnelDataApi()
  funnelData.value = res
  myChart.value = markRaw(echarts.init(funnel.value));
  draw();
}
const draw = () => {
  option.value = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    legend: {
      data: funnelData.value.data.map((value:Common) => value.name)
    },
    series: [
      {
        name: '价位',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: funnelData.value.data
      }
    ]
  }
  myChart.value.setOption(option.value, {notMerge: true});
}
onMounted(() => {
  init()
})
</script>

<template>
  <div ref="funnel" class="funnel">
  </div>
</template>

<style scoped>
.funnel{
  width: 100%;
  height: 100%;
}
</style>